<template>
  <div class="box">
    <div>网络状态：{{ state }}</div>
    <div>延迟：{{ rtt }}</div>
    <div>带宽：{{ downlink }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
const state = ref()
const rtt = ref()
const downlink = ref()
const connect = reactive(navigator.connection)
onMounted(() => {
  state.value = `${connect.effectiveType}`
  rtt.value = `${connect.rtt}ms`
  downlink.value = `${connect.downlink}Mb/s`
  connect.addEventListener('change', (e) => {
    state.value = `${e.currentTarget.effectiveType}`
    rtt.value = `${e.currentTarget.rtt}ms`
    downlink.value = `${e.currentTarget.downlink}Mb/s`
  })
})
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 100px;
  background-color: aqua;
  margin: 100px auto;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-flow: column;

  box-sizing: border-box;
  line-height: 25px;
  span {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: baseline;
  }
}
</style>
